<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button class="btn1">按钮1</button>
  <button class="btn2">按钮2</button>
  <button class="btn3">按钮3</button>
  <button class="btn4">按钮4</button>
  <script>
    // 存
    const save = (key, value, delay) => {
      // delay表示持续时间
      localStorage.setItem(
        key, 
        // 把持续时间添加到time
        // time表示的就是到期的时间
        JSON.stringify({value, time:new Date().getTime() + delay*60*1000})
      );
    };
    const get = (key) => {
      const values = localStorage.getItem(key);
      if (values) {
        // 解构赋值: 快速的从数组或者对象里面提取想要的值
        const {value, time} = JSON.parse(values);
        if (new Date().getTime() > time) {
          // 过期了
          alert("数据过期了");
          // 删除了保存的数据
          localStorage.removeItem(key);
        } else {
          console.log(value, time);
          
        }
      }
    };


    document.querySelector(".btn1").onclick = () => save("name","zhangsan",1);
    document.querySelector(".btn2").onclick = () => save("age","30",3);

    document.querySelector(".btn3").onclick = () => get("name");
    document.querySelector(".btn4").onclick = () => get("age");
  </script>
</body>
</html>